<template>
  <div class="shortMessage rechargeRecord" v-loading="fullscreenLoading">
    <div class="part">
      <el-form ref="form"
               :inline="true"
               class="search-form"
               label-width="80px"
               :model="form">
        <el-form-item label="代理商" v-if="gradeOrigin === 3">
          <el-select v-model="form.sign" size="small" style="width: 175px">
            <el-option v-for="item in agentList"
                       :key="item.sign"
                       :label="item.company"
                       :value="item.sign"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值时间">
          <el-date-picker
              v-model="date"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search(1)">查询</el-button>
          <el-button size="small" type="primary" @click="recharge">充值</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="loading"
              :data="tableData">
      <el-table-column label="ID" prop="id" width="80px"/>
      <el-table-column v-if="gradeOrigin === 3"
                       label="代理商"
                       prop="company"/>
      <el-table-column label="充值数量（条）"
                       prop="count"/>
      <el-table-column label="充值金额（元）"
                       prop="money"/>
      <el-table-column label="充值时间"
                       prop="create_time"/>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :page-size.sync="form.size"
          :current-page.sync="form.page"
          :total="total"
          :hide-on-single-page="true"
          @current-change="search"
      />
    </div>
    <recharge-dialog ref="recharge" :agents="agentList" @success="search"/>
  </div>
</template>

<script>
import './index.less'
import {mapGetters} from "vuex";
import {getAgents} from "@/plugins/api";
import dayjs from "dayjs";
import {pageSize} from "@/constant";
import rechargeDialog from './parts/recharge'

export default {
  name: "rechargeRecord",
  data() {
    return {
      tableData: [],
      total: 0,
      loading: false,
      fullscreenLoading: false,
      form: {
        sign: '',
        page: 1,
        size: pageSize,
        time_begin: '',
        time_end: '',
      },
      date: [
        dayjs().subtract(1, 'months').format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD')
      ],
      agentList: []
    }
  },
  computed: {
    ...mapGetters([
      'gradeOrigin'
    ])
  },
  watch: {
    date: {
      immediate: true,
      deep: true,
      handler(date) {
        let time_begin = '',
            time_end = ''
        if (date) {
          [time_begin = '', time_end = ''] = date
        }
        this.form.time_begin = time_begin
        this.form.time_end = time_end
      }
    }
  },
  async mounted() {
    let sign = 0
    this.fullscreenLoading = true
    let agentList = []
    if (this.gradeOrigin === 3) {
      let {data} = await getAgents()
      if (data.length > 0) {
        sign = data[0].sign
      }
      agentList = data
    }
    this.agentList = agentList
    this.form.sign = sign
    this.fullscreenLoading = false
    this.search(1).then(() => {
    })
  },
  methods: {
    async search(page) {
      let tableData = [],
          total = 0
      this.loading = true
      await this.$axios.get('/api/v1/sms/recharges', {
        params: {
          ...this.form,
          page
        }
      }).then(res => {
        tableData = res.data || []
        total = res.total || 0
      }).catch((err) => {
        this.$message.error(err.message)
      })
      this.loading = false
      this.tableData = tableData
      this.total = total
    },
    recharge() {
      this.$refs.recharge.open(this.form.sign)
    }
  },
  components: {
    rechargeDialog
  }
}
</script>

<style scoped>

</style>